<template>
  <div class="userMgt padding_20">
    <el-button type="primary"
               @click="handleAdd">新 增</el-button>
    <Table stripe
           border
           :columns="dataCol"
           :data="dataList"
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="handleView(row)">分配权限</span>
        <span @click="handleEdit(row)">编辑</span>
        <span @click="handleDel(row)">删除</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <roleEdit ref="roleEdit"
              @getList="_getList"></roleEdit>
    <roleView ref="roleView"
              @getList="_getList"></roleView>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import RoleEdit from './roleEdit'
  import RoleView from './roleView'
  import { mapGetters } from 'vuex'
  export default {
    name: "userMgt",
    data () {
      return {
        dataCol: [
          {
            type: 'index2',
            title: '',
            width: 70,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '角色名称',
            key: 'name'
          },
          {
            title: '备注',
            key: 'remark'
          },
          {
            title: '创建人',
            key: 'createBy'
          },
          {
            title: '修改人',
            key: 'lastUpdateBy'
          },
          {
            title: '修改时间',
            key: 'lastUpdateTime',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            width: 200,
            align: 'center'
          }
        ],
        dataList: [],
        pageTotal: 0,       //总条数
        param: {
        }
      }
    },
    mounted () {
      this._getList()
    },
    methods: {
      handleView (row) {
        this.$refs.roleView.openView(row)
      },
      handleAdd () {
        this.$refs.roleEdit.openView()
      },
      handleEdit (row) {
        this.$refs.roleEdit.openView(row)
      },
      handleDel (row) {
        this.$Modal.confirm({
          title: '确认',
          content: '<p>您确认删除该角色？</p>',
          onOk: () => {
            this.ajax({
              type: this.api.roleDel.type,
              url: this.api.roleDel.url,
              isDel: true,
              data: {
                id: row.id,
              },
              success: (data) => {
                this.$Message.success('删除成功！');
                this._getList()
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          },
          onCancel: () => { }
        });
      },
      searchOrder () {
        this.$refs.page.setPageNum()
        this._getList()
      },
      _getList () {
        this.ajax({
          type: this.api.roleList.type,
          url: this.api.roleList.url,
          data: Object.assign({}, this.page, this.param),
          success: (data) => {
            this.dataList = data.object
            this.pageTotal = data.totalNum
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page,
      RoleEdit,
      RoleView
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .userMgt {
  }
</style>
